Žiniatinklio prieinamumo API: suteikiant vartotojams galimybes per ekrano skaitymo programų palaikymą ir naršymą klaviatūra

Šiandieninėje skaitmeninėje erdvėje žiniatinklio prieinamumo užtikrinimas yra ne tik geriausia praktika, bet ir pagrindinis reikalavimas. Tikrai įtraukiantis žiniatinklis suteikia vienodą prieigą ir galimybes visiems vartotojams, neatsižvelgiant į jų gebėjimus. Žiniatinklio prieinamumo API (programų programavimo sąsajos) yra esminės priemonės, palengvinančios ryšį tarp žiniatinklio turinio ir pagalbinių technologijų (AT), tokių kaip ekrano skaitymo programos ir alternatyvūs įvesties įrenginiai. Šiame straipsnyje nagrinėjamas žiniatinklio prieinamumo API svarba, ypatingą dėmesį skiriant ekrano skaitymo programų palaikymui ir naršymui klaviatūra – dviem esminiams prieinamų žiniatinklio patirčių kūrimo aspektams pasaulinei auditorijai.

Žiniatinklio prieinamumo API supratimas

Žiniatinklio prieinamumo API yra sąsajų rinkiniai, atskleidžiantys informaciją apie žiniatinklio turinį pagalbinėms technologijoms. Jie leidžia AT suprasti žiniatinklio puslapio elementų struktūrą, semantiką ir būseną, suteikiant galimybę vartotojams su negalia efektyviai bendrauti. Be šių API, AT negalėtų tiksliai interpretuoti ir perduoti ekrane pateiktos informacijos.

Kai kurios svarbiausios žiniatinklio prieinamumo API apima:

• ARIA (Accessible Rich Internet Applications): atributų rinkinys, papildantis semantinę informaciją HTML elementams, ypač dinamiškam turiniui ir valdikliams, sukurtiems naudojant JavaScript. ARIA plačiai palaikoma įvairiose naršyklėse ir pagalbinėse technologijose.
• MSAA (Microsoft Active Accessibility): senesnė API, daugiausia naudojama Windows sistemose. Nors vis dar aktuali senoms programoms, ARIA paprastai teikiama pirmenybė naujiems kūrimams.
• IAccessible2: API, sukurta remiantis MSAA, teikianti išsamesnę informaciją apie prieinamus objektus.
• UI Automation (UIA): Microsoft moderni prieinamumo API, siūlanti geresnį našumą ir funkcionalumą, palyginti su MSAA.
• Accessibility Tree: DOM (Document Object Model) atvaizdavimas, pritaikytas pagalbinėms technologijoms, pašalinant nereikšmingus mazgus ir atskleidžiant semantinę informaciją per prieinamumo API.

Ekrano skaitymo programų palaikymas: turinio pavertimas garsu

Ekrano skaitymo programos yra programinė įranga, kuri tekstą ir kitą vaizdinę informaciją paverčia kalbos arba Brailio rašto išvestimi. Jos yra būtinos akliesiems arba silpnaregiams asmenims, suteikiančios jiems galimybę pasiekti ir bendrauti su žiniatinklio turiniu. Efektyvus ekrano skaitymo programų palaikymas labai priklauso nuo teisingo žiniatinklio prieinamumo API įdiegimo.

Pagrindiniai ekrano skaitymo programų suderinamumo aspektai:

• Semantinis HTML: naudojant semantinius HTML elementus (pvz., <article>, <nav>, <aside>, <header>, <footer>, <main>, <h1>–<h6>, <p>, <ul>, <ol>, <li>) sukuriama aiški struktūra, kurią ekrano skaitymo programos gali interpretuoti. Venkite naudoti bendrinius elementus, tokius kaip <div> ir <span>, kai yra daugiau konkrečių semantinių elementų.
• ARIA atributai: naudokite ARIA atributus, kad patobulintumėte HTML elementų semantiką, ypač dinamiškam turiniui, pasirinktiniams valdikliams ir elementams, kurių elgesys nestandartinis. Kai kurie svarbūs ARIA atributai apima:
• aria-label: pateikia tekstinę alternatyvą elementams, kurie neturi matomų tekstinių etikečių. Pavyzdžiui: <button aria-label="Uždaryti">X</button>
• aria-labelledby: susieja elementą su kitu elementu, kuris pateikia jo etiketę. Tai naudinga, kai jau yra matoma etiketė.
• aria-describedby: susieja elementą su kitu elementu, kuris pateikia aprašymą arba instrukcijas.
• aria-live: nurodo, kad puslapio sritis yra dinamiškai atnaujinama, o ekrano skaitymo programos turėtų pranešti apie pakeitimus. Reikšmės apima off (numatytoji), polite (praneša, kai vartotojas yra neaktyvus) ir assertive (praneša nedelsiant, potencialiai nutraukdamas vartotojo darbą).
• aria-role: apibrėžia semantinį elemento vaidmenį, nepaisydamas numatytojo vaidmens. Pavyzdžiui: <div role="button">Spustelėkite mane</div>
• aria-hidden: paslepia elementą nuo pagalbinių technologijų. Naudokite atsargiai, nes turinio slėpimas vizualiai ir nuo pagalbinių technologijų gali sukelti prieinamumo problemų.
• aria-expanded: nurodo, ar išplečiamas elementas (pvz., meniu arba akordeono skydelis) šiuo metu yra išplėstas.
• aria-haspopup: nurodo, kad elementas turi iššokantįjį meniu arba dialogo langą.
• Alternatyvus tekstas vaizdams: pateikite aprašomąjį alternatyvų tekstą (alt atributą) visiems vaizdams. Tai leidžia ekrano skaitymo programoms perduoti vaizdo turinį ir paskirtį vartotojams, kurie jo nemato. Naudokite glaustus ir prasmingus aprašymus. Grynai dekoratyviniams vaizdams naudokite tuščią alt atributą (alt="").
• Formos etiketės: susiekite formos įvestis su aiškiomis ir aprašomosiomis etiketėmis naudodami <label> elementą ir for atributą. Tai užtikrina, kad ekrano skaitymo programos praneštų kiekvieno įvesties lauko paskirtį.
• Antraštės ir orientyrai: naudokite antraštes (<h1>–<h6>), kad logiškai struktūruotumėte turinį, leisdami ekrano skaitymo programų vartotojams naršyti puslapį pagal antraštės lygį. Naudokite orientyrų vaidmenis (pvz., role="navigation", role="main", role="banner", role="complementary", role="contentinfo"), kad apibrėžtumėte pagrindines puslapio dalis, suteikdami vartotojams galimybę greitai pereiti į skirtingas sritis.
• Lentelės: naudokite lenteles tik lenteliniams duomenims ir pateikite atitinkamas lentelės antraštes (<th>) ir antraštes (<caption>). Naudokite scope atributą <th> elementuose, kad apibrėžtumėte jų ryšį su duomenų langeliais (pvz., scope="col" stulpelių antraštėms, scope="row" eilučių antraštėms).
• Dinamiški turinio atnaujinimai: kai turinys atnaujinamas dinamiškai (pvz., naudojant AJAX arba JavaScript), naudokite ARIA tiesiogines sritis (aria-live atributą), kad praneštumėte ekrano skaitymo programoms apie pakeitimus. Atsižvelkite į atitinkamą aria-live reikšmę (polite arba assertive), kad neperkrautumėte vartotojo.
• Klaidų tvarkymas: pateikite aiškius ir informatyvius klaidų pranešimus, skirtus formos patvirtinimui ir kitoms vartotojo sąveikoms. Susiekite klaidų pranešimus su atitinkamais formos laukais naudodami aria-describedby.

Pavyzdys: prieinamas vaizdas

Neteisingai: <img src="logo.png">

Teisingai: <img src="logo.png" alt="Įmonės logotipas – Example Corp">

Pavyzdys: prieinama formos etiketė

Neteisingai: <input type="text" id="name"> Vardas:

Teisingai: <label for="name">Vardas:</label> <input type="text" id="name">

Naršymas klaviatūra: užtikrinant valdymą be pelės

Naršymas klaviatūra yra būtinas vartotojams, kurie negali naudoti pelės ar kito žymeklio įrenginio. Tai apima asmenis su motorikos sutrikimais, asmenis, kurie teikia pirmenybę klaviatūros sparčiuosiams klavišams, ir asmenis, kurie naudojasi pagalbinėmis technologijomis, kurios priklauso nuo klaviatūros įvesties. Užtikrinant patikimą naršymą klaviatūra, užtikrinama, kad visi interaktyvūs žiniatinklio puslapio elementai būtų prieinami ir valdomi klaviatūra.

Pagrindiniai naršymo klaviatūra aspektai:

• Loginė fokusavimo tvarka: užtikrinkite, kad fokusavimo tvarka (tvarka, kuria elementai gauna fokusą, kai vartotojas paspaudžia Tab klavišą) būtų loginė ir intuityvi. Fokusavimo tvarka paprastai turėtų atitikti vizualų puslapio srautą.
• Matomas fokusavimo indikatorius: pateikite aiškų ir matomą fokusavimo indikatorių visiems interaktyviems elementams, kai jie gauna fokusą. Tai leidžia vartotojams lengvai nustatyti, kuris elementas šiuo metu yra aktyvus. Numatytąjį naršyklės fokusavimo indikatorių dažnai galima stilizuoti naudojant CSS (pvz., :focus pseudo klasę). Užtikrinkite pakankamą kontrasto santykį tarp fokusavimo indikatoriaus ir aplinkinio fono.
• Klaviatūros spąstai: venkite kurti klaviatūros spąstus, kai vartotojas įstringa tam tikrame elemente arba puslapio dalyje ir negali išeiti naudodamas Tab klavišą. Tai gali būti ypač problematiška su modaliniais dialogo langais ir pasirinktiniais valdikliais.
• Praleidimo naršymo nuorodos: puslapio pradžioje pateikite „praleisti naršymą“ nuorodą, kuri leistų vartotojams apeiti pasikartojančius naršymo elementus ir pereiti tiesiai į pagrindinį turinį. Tai ypač naudinga vartotojams, kurie naudojasi ekrano skaitymo programomis arba naršymu klaviatūra.
• Prieigos klavišai (atsargiai): prieigos klavišai (klaviatūros sparčiuosius klavišus, kurie aktyvuoja konkrečius elementus) gali būti naudingi, tačiau juos reikėtų naudoti atsargiai, nes jie gali prieštarauti esamiems naršyklės ar operacinės sistemos sparčiuosiams klavišams. Jei naudojami, pateikite aiškų mechanizmą, kad vartotojai galėtų atrasti ir tinkinti prieigos klavišus. Apsvarstykite galimus konfliktus skirtingose kalbose ir klaviatūros išdėstymuose.
• Pasirinktiniai valdikliai ir sąveikos klaviatūra: kuriant pasirinktinius valdiklius (pvz., pasirinktinius išskleidžiamuosius meniu, slankiklius arba datų parinkiklius), užtikrinkite, kad jie būtų visiškai prieinami klaviatūra. Pateikite klaviatūros atitikmenis visoms sąveikoms pele. Naudokite ARIA atributus, kad apibrėžtumėte valdiklio vaidmenį, būseną ir savybes. Dažni ARIA valdiklių modeliai apima:
• Mygtukai: naudokite atributą role="button" ir užtikrinkite, kad elementą būtų galima suaktyvinti naudojant Enter arba Space klavišą.
• Nuorodos: naudokite <a> elementą su galiojančiu href atributu nuorodoms.
• Formos elementai: naudokite atitinkamus formos elementus, tokius kaip <input>, <select> ir <textarea>, ir susiekite juos su etiketėmis.
• Meniu: naudokite role="menu", role="menuitem" ir susijusius ARIA atributus, kad sukurtumėte prieinamus meniu. Leiskite vartotojams naršyti meniu naudojant rodyklių klavišus.
• Dialogo langai: naudokite atributą role="dialog" arba role="alertdialog", kad sukurtumėte prieinamus dialogo langus. Užtikrinkite, kad fokusavimas būtų tinkamai valdomas atidarant ir uždarant dialogo langą ir kad Escape klavišas uždarytų dialogo langą.
• Skirtukai: naudokite atributus role="tablist", role="tab" ir role="tabpanel", kad sukurtumėte prieinamas skirtukų sąsajas. Leiskite vartotojams perjungti skirtukus naudojant rodyklių klavišus.
• Testavimas: kruopščiai išbandykite naršymą klaviatūra tik naudojant klaviatūrą. Atkreipkite dėmesį į fokusavimo tvarką, fokusavimo indikatorių ir visų interaktyvių elementų valdymą.

Pavyzdys: praleidimo naršymo nuoroda

<a href="#main" class="skip-link">Pereiti prie pagrindinio turinio</a>

<nav><!-- Naršymo meniu --></nav> <main id="main"><!-- Pagrindinis turinys --></main>

Pavyzdys: fokusavimo indikatoriaus stilizavimas

button:focus { outline: 2px solid blue; }

Prieinamumo testavimas ir patvirtinimas

Reguliarus prieinamumo testavimas yra labai svarbus nustatant ir sprendžiant prieinamumo problemas. Yra įvairių priemonių ir metodų, skirtų prieinamumo testavimui, įskaitant:

• Automatiniai prieinamumo tikrintuvai: šios priemonės nuskaito žiniatinklio puslapius, ieškodamos dažnų prieinamumo klaidų. Pavyzdžiai apima WAVE, axe DevTools ir Google Lighthouse. Nors automatiniai tikrintuvai gali būti naudingi, jais nereikėtų pasikliauti kaip vienintele priemone prieinamumui tikrinti, nes jie negali aptikti visų problemų.
• Rankinis prieinamumo testavimas: tai apima rankinį žiniatinklio puslapių peržiūrą, siekiant nustatyti prieinamumo problemas, kurių negalima aptikti automatinėmis priemonėmis. Tai apima testavimą su ekrano skaitymo programomis, naršymu klaviatūra ir kitomis pagalbinėmis technologijomis.
• Testavimas su žmonėmis su negalia: efektyviausias būdas užtikrinti prieinamumą yra įtraukti žmones su negalia į testavimo procesą. Jų atsiliepimai gali suteikti vertingų įžvalgų apie svetainės tinkamumą naudoti asmenims, turintiems įvairių poreikių.

WCAG ir prieinamumo standartai

Žiniatinklio turinio prieinamumo gairės (WCAG) yra tarptautiniu mastu pripažintų gairių rinkinys, skirtas padaryti žiniatinklio turinį prieinamesnį. WCAG sukūrė Pasaulinis žiniatinklio konsorciumas (W3C) ir pateikia išsamų sėkmės kriterijų rinkinį skirtingiems prieinamumo atitikties lygiams (A, AA ir AAA). Siekis atitikti WCAG yra pagrindinis žingsnis kuriant prieinamas žiniatinklio patirtis. Daugelis šalių ir regionų turi įstatymus ir taisykles, reikalaujančius, kad svetainės atitiktų WCAG. Pavyzdžiai apima:

• 508 skirsnis (Jungtinės Amerikos Valstijos): reikalauja, kad federalinės agentūros padarytų savo elektronines ir informacines technologijas prieinamas žmonėms su negalia.
• Neįgaliųjų prieigos prie Ontarijo įstatymas (AODA) (Kanada): reikalauja, kad organizacijos Ontarijuje padarytų savo svetaines prieinamas žmonėms su negalia.
• Europos prieinamumo aktas (EAA) (Europos Sąjunga): nustato prieinamumo reikalavimus įvairiems produktams ir paslaugoms, įskaitant svetaines ir mobiliąsias programėles.

Pasauliniai aspektai

Kuriant ir plėtojant prieinamas svetaines pasaulinei auditorijai, būtina atsižvelgti į šiuos dalykus:

• Kalba ir lokalizacija: užtikrinkite, kad svetainė būtų tinkamai lokalizuota skirtingoms kalboms, įskaitant alternatyvų tekstą vaizdams, formų etiketes ir kitus teksto elementus. Apsvarstykite skirtingų simbolių rinkinių ir teksto krypties poveikį (pvz., kalbos iš dešinės į kairę).
• Kultūriniai aspektai: žinokite apie kultūrinius skirtumus, kurie gali turėti įtakos prieinamumui. Pavyzdžiui, spalvų simbolika gali skirtis priklausomai nuo kultūros, o kai kurie vaizdai gali būti įžeidžiantys arba netinkami tam tikruose regionuose.
• Pagalbinių technologijų naudojimas: ištirkite skirtingų pagalbinių technologijų paplitimą skirtinguose regionuose. Tai gali padėti nustatyti testavimo ir optimizavimo pastangų prioritetus.
• Teisiniai reikalavimai: žinokite apie prieinamumo įstatymus ir taisykles skirtingose šalyse ir regionuose.

Išvada

Žiniatinklio prieinamumo API yra būtinos kuriant įtraukiančias žiniatinklio patirtis vartotojams su negalia. Teisingai suprasdami ir įgyvendindami šias API, kūrėjai gali užtikrinti, kad žiniatinklio turinys būtų prieinamas ekrano skaitymo programų ir klaviatūros vartotojams, suteikdami asmenims galimybę visapusiškai dalyvauti skaitmeniniame pasaulyje. Prioritetinis prieinamumas nuo projekto pradžios ir reguliaraus prieinamumo testavimo įtraukimas leis sukurti patogesnį ir teisingesnį žiniatinklį visiems. Laikydamiesi WCAG gairių, vadovaudamiesi geriausia ekrano skaitymo programų palaikymo ir naršymo klaviatūra praktika bei atsižvelgdami į pasaulinius veiksnius, galite sukurti svetaines, kurios būtų tikrai prieinamos įvairiai ir tarptautinei auditorijai. Atminkite, kad prieinamumas yra ne tik techninis reikalavimas, bet ir įsipareigojimas įtraukumui ir lygioms galimybėms.

Įgyvendinkite prieinamumą. Kurkite visiems.